<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用学习帮APP</title>
    <script>
        let userInfo = localStorage.getItem('XGB-user')
        if(userInfo === null || JSON.parse(userInfo).id === 0){
            window.location.replace('../login/login.html')
        }
    </script>
    <link rel="stylesheet" href="./css/index_lunbotu.css">
    <link rel="stylesheet" href="../../css/footer.css">
    <link rel="stylesheet" href="./css/indexsection.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            font-size: .4348rem;
            font-family: 微软雅黑;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            user-select: none;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            
        }
        section{
            /*
            border: .0742rem solid rgb(0, 255, 251);*/
            /*填充剩余高度*/
            flex: 1;
            display: flex;
            flex-direction: column;
            
            overflow-y: scroll;





            /*
            overflow-y: scroll;*/
            
        }


        .Alert p span{
            display: inline-block;
            text-align: right;/*
            width:2.4155rem;*/
            font-weight:600;
            margin-right:.4348rem;
        }
    </style>

    
    <script type="text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "h3tfnethmu");
    </script>
    
    
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css"  referrerpolicy="no-referrer"/>
    
    <!-- 点播neplayer -->
    <link href="../../lib/sdk/videoplay/sdk/neplayer_v2.8.5.css" rel="stylesheet">
    <script src="../../lib/sdk/videoplay/sdk/neplayer_v2.8.5.js"></script>
    <script src="../../js/mobile-detect.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <script src="../../lib/axios.js"></script>
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/echarts.js"></script>
    <link rel="stylesheet" href="./css/echarts.css">
    <!-- <script src="./js/echarts.js"></script> -->
    <!--问卷星-->
    <script type="text/javascript" src="https://www.wjx.cn/js/ap.js?activity=whrxt2f" id="wjxFloatBtnJsCode"></script>





</head>
<body>
    <!-- <div class="fwq"></div> -->
    <div id="allmap" style="display: none;"></div>
    <div class="adContainer">
        <a class="adContainer1"></a>

        <!-- 变动部分 -->
        <a class="adContainer2">
           
            <!-- 底色 -->
            <div class="right" style="background: #eee;"></div>
            
            <div class="right ad">
                <div class="img"></div>
                <div class="name"></div>
            </div>
            <!-- <div class="right bg" style="background: #eee;"></div> -->
            
        </a> 
       
        <style>
            .adContainer2{
                
                perspective: 2.657rem;
                -webkit-perspective: 2.657rem; /* Safari and Chrome */
                /*
                perspective-origin: 56% 69.5%;*/
                perspective-origin: 1.9516rem 4.3894rem;
            }
            .adContainer2 .left{
                /**/
                border: .0004rem solid rgba(255, 0, 0, 0);
                position: absolute;
                top: 2.1014rem;
                left: 4.2585rem;
                width: .7005rem;
                height: 1.845rem;
                transform-style: preserve-3d;
                transform: rotateY(-20deg) rotateZ(1deg);
            }
            

            .adContainer2 .right{
                /*
                border: .04rem solid rgba(255, 0, 0, 0.851);*/
                position: absolute;
                top: 2.2222rem;
                left: 4.8111rem;
                width: 4.132rem;
                height: 1.7515rem;
                background: url(../../images/index/ad_model1.webp) no-repeat;
                filter: blur(.0048rem) grayscale(0.2);
                background-size: cover;
                transform-style: preserve-3d;
                transform: rotateY(7deg) rotateZ(0deg);/*
                background-position: 0rem 1.7515rem;*/
                background-position: 0rem 12.7515rem;
                

            }
            .adContainer2 .ad{/*
                transition: background-position 2.5s linear;*/
            }
            .adContainer2 .right .img{
                /*
                border: .04rem solid rgba(255, 0, 0, 0.851);*/
                display: none;
                width: .92rem;
                height: .92rem;
                border-radius: 50%;
                margin-top: .3895rem;
                margin-left: .5rem;
                background-image: url();
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
            }
            .adContainer2 .right .name{/*
                border: .04rem solid rgba(255, 0, 0, 0.851);*/
                display: none;
                color: #fff;
                font-size: .3382rem;
                margin-top: -0.3623rem;
                margin-left: 2.1014rem;
                width: 2.0531rem;
                height: .4348rem;
                transform: scale(0.8);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            

        </style>
        <script>
            let vcode = JSON.parse(userInfo).id
            axios.get(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getUserList/getRandomUser?vcode=${vcode}`)
            .then(res=>{
                if(res.code !== 0){
                    let name = res.data.res.name
                    name = (name == '' ? '无名用户' : name)
                    let userImg = res.data.res.userImg
                    userImg = (userImg == '' ? '../../images/person/person_senter/defaultUserImg.webp' : userImg)
                    document.querySelector('.adContainer2 .ad .name').innerHTML = name
                    document.querySelector('.adContainer2 .ad .img').style.backgroundImage = `url(${userImg})`
                }
            })

            document.addEventListener('DOMContentLoaded', function() {
                show()
             });
             function show(){
                    document.querySelector('.adContainer2 .ad').style.transition='background-position 1.5s linear'
                    document.querySelector('.adContainer2 .ad').style.backgroundPosition='0rem 0rem'    
                    let timeout1 = setTimeout(()=>{
                        document.querySelector('.adContainer2 .ad .img').style.display='block'
                        document.querySelector('.adContainer2 .ad .name').style.display='block' 
                        clearTimeout(timeout1)
                    },2000)
             }
        </script>
        <!-- 变动部分 -->
    </div>

    <section class="section">
        <!-- 环境状态 -->
        <div class="condition">
            <div class="top">
                <div class="left">
                    <div class="iconfwq" id="iconfwq"></div>
                    <!-- 动态插入 -->
                    <span id="fwq1">服务接收中</span>
                    <!-- <script src="./js/indexfwq4.js"></script> -->
                </div>

                <!-- 定位   20230518 -->
                <div class="dy" style="display: none;">
                    <span id="khd" style="display: none;">客户端定位</span><br>
                    <span id="ip" style="display: none;">ip地址</span>
                    <span id="network" style="display: none;">网络</span>
                </div>
                
                
                


                <div class="right" id="shebei">设备获取中</div>
            </div>
            <!-- 动态插入 -->
            <span id="code1">XGB112.939636-33.066446-112.939636-33.066446</span>
        </div>

        <van-notice-bar scrollable left-icon="volume" :text="indexAnnouncement" delay="3">
        </van-notice-bar>

        


        
        <div class="scontant">
            <!-- 资料列表 -->
            <template v-if="isShow">
                <ul class="ul1 fwq">
                    <li v-for="item in dataList" :key="item._id">
                        <a :href="item.url">
                            <div class="icon"><img :src="item.img" alt=""></div>
                            <div class="courseInfo">
                                <span class="name">{{item.name}}</span>
                                <span class="limit">{{item.for}}</span>
                                <span class="limit">专业: {{item.limit}}</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </template>
            
            <!-- chat入口 -->
            <div class="adBox">
                <a href="../chatai/chatai.html"></a>
                <div class="off"></div>
            </div>

            <!-- 数据统计 -->
            <div class="echartsBox1" v-show="'boy' in raw_data">
                <h4>学习帮社区运营数据报表</h4>
                <!-- 知识库增长趋势 -->
                <div class="box knowledge_growth_trendBox">
                    <!-- 图 -->
                    <div id="knowledge_growth_trend" class="echarts knowledge_growth_trend"></div>
                    <!-- title -->
                    <div class="title">知识库增长趋势</div>
                </div>
                <!-- 社区热度趋势 -->
                <div class="box community_popular_trendBox">
                    <!-- 图 -->
                    <div id="knowledge_growth_trend" class="echarts community_popular_trend"></div>
                    <!-- title -->
                    <div class="title">社区热度趋势</div>
                </div>
                <!-- 用户活跃度排行 -->
                <div class="box user_activity_rankingBox">
                    <!-- 图 -->
                    <div id="user_activity_ranking" class="echarts user_activity_ranking"></div>
                    <!-- 描述 -->
                    <div class="detail">
                        <ul>
                            <li>
                                <span>用户</span>
                                <span>群聊/交流圈</span>
                                <span>知识库/广场</span>
                                <span>排名</span>
                            </li>
                            <li v-for="(item, index) of raw_data.firstThree_pop_order" :index="index">
                                <div class="userImg">
                                    <img :src="'firstThree_pop_order' in raw_data ? (item.userImg == '' ? './img/defaultUserImg.webp' : item.userImg) : ''" alt=""> 
                                </div>
                                <span>{{'firstThree_pop_order' in raw_data ? (('GroupChat' in item ? item.GroupChat : 0)) : 0}}</span>
                                <span>{{'firstThree_pop_order' in raw_data ? (('article' in item ? item.article : 0)) : 0}}</span>
                                <div :class="(index == 0) ? ('order first') : (index == 1 ? 'order second' : 'order third')"></div>
                            </li>
                        </ul>
                    </div>
                    <!-- title -->
                    <div class="title">用户活跃度排行<span style="font-size: .362rem; color: #767676;">{{('firstThree_pop_order' in raw_data && raw_data.firstThree_pop_order.length == 0) ? '[今日暂无活跃度]' : ''}}</span></div>
                </div>
                <!-- 用户增长趋势 -->
                <div class="box user_growth_trendBox">
                    <!-- 图 -->
                    <div id="user_growth_trend" class="echarts user_growth_trend"></div>
                    <!-- 描述 -->
                    <div class="detail">
                        <ul>
                            <li>
                                <span>日期</span>
                                <span>增长量</span>
                            </li>
                            <li>
                                <span>昨天</span>
                                <span>24</span>
                            </li>
                            <li>
                                <span>2024/04/20</span>
                                <span>24</span>
                            </li>
                            <li>
                                <span>2024/04/19</span>
                                <span>15</span>
                            </li>
                            <li>
                                <span>2024/04/18</span>
                                <span>13</span>
                            </li>
                            <li>
                                <span>2024/04/17</span>
                                <span>20</span>
                            </li>
                        </ul>
                    </div>
                    <!-- title -->
                    <div class="title">用户增长趋势</div>
                </div>
                
                <!-- 性别分布图 -->
                <div class="box genderBox">
                    <!-- 图 -->
                    <div id="gender" class="echarts gender"></div>
                    <!-- 描述 -->
                    <div class="detail">
                        <ul>
                            <li>
                                <span>性别</span>
                                <span>人数</span>
                                <span>占比</span>
                            </li>
                            <li>
                                <span>男</span>
                                <span>{{raw_data.boy}}</span>
                                <span>{{((raw_data.boy/raw_data.user_total)*100).toFixed(2)}}%</span>
                            </li>
                            <li>
                                <span>女</span>
                                <span>{{raw_data.girl}}</span>
                                <span>{{100-((raw_data.boy/raw_data.user_total)*100).toFixed(2)}}%</span>
                            </li>
                        </ul>
                    </div>
                    <!-- title -->
                    <div class="title">性别分布</div>
                </div>
                <!-- 专业分布 -->
                <div class="box majorBox">
                    <!-- 图 -->
                    <div id="major" class="echarts major"></div>
                    <!-- 描述 -->
                    <div class="detail">
                        <ul>
                            <li>
                                <span>专业</span>
                                <span>人数</span>
                                <span>占比</span>
                            </li>
                            <li v-for="(item, index) of major_data">
                                <span>{{item.name}}</span>
                                <span>{{item.value}}</span>
                                <span>{{((item.value/raw_data.user_total)*100).toFixed(2)}}%</span>
                            </li>
                            
                        </ul>
                    </div>
                    <!-- title -->
                    <div class="title">专业分布</div>
                </div>
                <!-- 知识库分布 -->
                <div class="box knowledgeBox">
                    <!-- 图 -->
                    <div id="knowledge" class="echarts knowledge"></div>
                    <!-- 描述 -->
                    <div class="detail">
                        <ul>
                            <li>
                                <span>知识类型</span>
                                <span>数量</span>
                                <span>占比</span>
                            </li>
                            <li>
                                <span>图文动态</span>
                                <span>{{'article' in raw_data ? raw_data.article.twdt : 0}}</span>
                                <span>{{((('article' in raw_data ? raw_data.article.twdt : 0)/(('article' in raw_data ? raw_data.article.twdt : 0)+('article' in raw_data ? raw_data.article.tw : 0)+('article' in raw_data ? raw_data.article.wz : 0)))*100).toFixed(2)}}%</span>
                            </li>
                            <li>
                                <span>提问</span>
                                <span>{{'article' in raw_data ? raw_data.article.tw : 0}}</span>
                                <span>{{((('article' in raw_data ? raw_data.article.tw : 0)/(('article' in raw_data ? raw_data.article.twdt : 0)+('article' in raw_data ? raw_data.article.tw : 0)+('article' in raw_data ? raw_data.article.wz : 0)))*100).toFixed(2)}}%</span>
                            </li>
                            <li>
                                <span>文章</span>
                                <span>{{'article' in raw_data ? raw_data.article.wz : 0}}</span>
                                <span>{{(100-(((('article' in raw_data ? raw_data.article.twdt : 0)/(('article' in raw_data ? raw_data.article.twdt : 0)+('article' in raw_data ? raw_data.article.tw : 0)+('article' in raw_data ? raw_data.article.wz : 0)))*100).toFixed(2))-(((('article' in raw_data ? raw_data.article.tw : 0)/(('article' in raw_data ? raw_data.article.twdt : 0)+('article' in raw_data ? raw_data.article.tw : 0)+('article' in raw_data ? raw_data.article.wz : 0)))*100).toFixed(2))).toFixed(2)}}%</span>
                            </li>
                            <li>
                                <span>需求</span>
                                <span>0</span>
                                <span>0%</span>
                            </li>
                        </ul>
                    </div>
                    <!-- title -->
                    <div class="title">知识库分布</div>
                </div>
                
                



            </div>

            <!-- 视频 -->
            <!-- <canvas id="canvas" style="width: 640px; height: 360px;display: none;"> -->
                <video id="my-video"  class="video-js" muted x-webkit-airplay="allow" webkit-playsinline controls preload="auto"></video>
            <!-- </canvas> -->

            

        </div>


    </section>


    
    <script src="./js/indexfwq4.js"></script>
    <style>
        .dy{
            transform: scale(0.01);
            opacity: 0;
        }
        .van-notice-bar{
            font-size: .3623rem !important;
            height: .7246rem !important;
        }
        
    </style>
    <link rel="stylesheet" href="./css/video.css">
  
    <script src="./js/indexdy1.js"></script>
    <script src="./js/network1.js"></script>
    <script src="./js/shebei.js"></script>
    <!-- <script src="./js/userInformation.js"></script> -->

    <footer>
        <!-- 首页 -->
        <a class="nav active" href="../index/index.html">
            <div class="icon"></div>
            <span>首页</span>
        </a>
        <!-- 广场 -->
        <a class="nav" href="../guangchang/guangchang.html">
            <div class="icon"></div>
            <span>广场</span>
        </a>
        <!-- 游戏 -->
        <a class="nav" href="../data/data.html">
            <div class="icon"></div>
            <span>帮友</span>
        </a>
        <!-- 我 -->
        <a class="nav" href="../person/person.html">
            <div class="icon"></div>
            <span>我</span>
        </a>


    </footer>
    <!-- 引入vant.js -->
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"  referrerpolicy="no-referrer"></script>

    
    <script>
        var vm = new Vue({
            //el: '.scontant',
            el: '.section',
            data: {
                dataList: [],
                isShow: false,
                indexAnnouncement: "",
                raw_data: {},
                //辅助参数
                major_data: []
            },
            methods: {
                enterFullscreen(){
                    console.log(123)
                    //myPlayer.enterFullscreen();
                }
            },
            mounted() {
                //document.querySelector(".scontant").style.display='flex'
                axios.get('https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getResource/getHmwk')
                .then(res=>{
                    this.dataList = res.data.data


                    /////////////////
                    var left = document.querySelector('.top .left')
                    var right = document.querySelector('.top .right')
                    left.onclick=()=>{
                        console.log('left', userKhd, userIp, userNetwork)
                        Alert(1)
                    }
                    right.onclick=()=>{
                        console.log('right', userShebei)
                        Alert(2)
                    }
                    var Alert =(i)=>{
                        var zhezhao = document.createElement('div')
                        zhezhao.style.position='fixed'
                        zhezhao.style.width='100%'
                        zhezhao.style.height='100%'
                        zhezhao.style.backgroundColor='#00000061'
                        zhezhao.style.display='flex'
                        zhezhao.style.justifyContent='center'
                        zhezhao.style.alignItems='center'
                        zhezhao.onclick=function(){
                            zhezhao.style.display='none'
                        }
                        var box = document.createElement('div')
                        box.style.width='75%'
                        box.style.boxSizing='border-box'
                        box.style.padding='.7246rem .4831rem'
                        box.style.backgroundColor='#fff'
                        box.style.borderRadius='.2415rem'
                        box.style.fontSize='.4348rem'
                        box.style.lineHeight='.80rem'
                        box.className='Alert'
                        if(i == 1){
                            //var boxHTML = `<p><span>ip</span>：${userIp}</p><p><span style='display: inline-block;text-align: right;width:2.4155rem;font-weight:600;margin-right:.4348rem;border:1px solid red;'>我的位置</span>${userKhd}</p><p>&emsp;网络类型：${userNetwork}</p>`
                            var boxHTML = `<p><span>ip</span>${userIp}</p><p><span style='width:1.9566rem' class='lang'>我的位置</span>${userKhd}</p><p><span>网络类型</span>${userNetwork}</p><p><span>服务区</span>${userFwq}</p>`
                        }else if(i == 2){
                            var myShebei = userShebei.split('  ')[0]
                            var myOs = userShebei.split('  ')[1]
                            var boxHTML = `<p><span style='width:1.9566rem' class='lang'>我的设备</span>${myShebei}</p><p><span>系统</span>${myOs}</p>`
                        }
                        box.innerHTML=boxHTML
                        var W = box.querySelector(".lang").style.width
                        console.log(2,W)
                        var spans = box.querySelectorAll(".Alert p span")
                        for(var i=0;i<spans.length;i++){
                            spans[i].style.width=W
                            console.log('1')
                        }
                        zhezhao.appendChild(box)
                        document.body.appendChild(zhezhao)
                    }
                    /////////////////
























                })

                let _this = this
                fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getArticleList1.0/getIndexAnnouncement`)
                .then(res=> res.json())
                .then(res=>{
                    if (res.code === 0) {
                        console.log(res.data)
                        _this.indexAnnouncement = res.data
                    }
                    
                })


                //视频
                let options = {
                    "canvasId": "canvas", //canvas标签的ID值，H265播放使用
                    "decoderPath": "../../lib/sdk/videoplay/sdk/lib/libffmpeg.js", //H265解码库地址
                    "controls": false, //是否显示控制条，整个视频下方控制条
                    "autoplay": true, //是否自动播放(ios不支持自动播放)
                    
                    /*预加载选项*/
                    "preload": "auto",
                    /*
                    'auto'预加载视频（需要浏览器允许）;
                    'metadata'仅预加载视频meta信息;
                    'none'不预加载;
                    */
                    
                    "poster": "../../images/index/HUAT50.webp", //视频播放前显示的图片
                    "loop": true, //是否循环播放
                    "width": 40, //设置播放器宽度
                    "height": 100, //设置播放器高度
                    
                    "techOrder": ['html5','flvjs','flash'], //优先使用的播放模式（2.3.0版本开始支持flvjs）
                    "streamTimeoutTime": 30 * 1000, //拉流超时时间，默认30s
                    /*设置播放器控件*/
                    controlBar: { 
                        playToggle: true
                    },
                    /* 
                    //设置不显示大播放按钮
                    bigPlayButton:false,
                    */
                    /*默认播放器控件列表
                    posterImage
                    textTrackDisplay
                    loadingSpinner
                    bigPlayButton
                    controlBar
                        playToggle
                        volumeMenuButton
                        currentTimeDisplay
                        timeDivider
                        durationDisplay
                        progressControl
                            seekBar
                                loadProgressBar
                                mouseTimeDisplay
                                playProgressBar
                        liveDisplay
                        remainingTimeDisplay
                        customControlSpacer
                        playbackRateMenuButton
                        chaptersButton
                        descriptionsButton
                        subtitlesButton
                        captionsButton
                        audioTrackButton
                        fullscreenToggle
                    */
                }
                /**/
                myPlayer =  neplayer( "my-video", options, ()=>{
                    console.log("播放器初始化完成。")
                    
                });
                var version = myPlayer.getVersion();
                console.log(`sdk版本:${version}`)
                myPlayer.setDataSource({
                    type: "video/mp4",
                    //src: "https://mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.cdn.bspapp.com/videos/test/dy_huat20231125211009.mp4"
                    //src: "./video/dy_huat20231125211009.mp4"
                })
                myPlayer.play();
                

                document.querySelector("video").onclick=()=>{
                    var result = myPlayer.isFullscreen()
                    console.log(`是否全屏：${result}`)
                    if (!result) {
                        console.log("进入全屏")
                        myPlayer.enterFullscreen()
                    }else{
                        console.log("退出全屏")
                        myPlayer.exitFullscreen()
                    }
                }
                














            }
        })
    </script>
    <script src="./js/echarts.js"></script>
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>
